<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/tpl/pg/js/gmap3.min.js"></script>
{% block operation %}
<div class="container-fluid ri rounded">
<h2>{{pageData["dao"].ente}}</h2>
<h3>Categoria rilevazione: {{pageData["dao"].categoria}}</h3>
<div class="col-sm-4 col-lg-4"><b>Data inserimento:</b></div>
    <div class="col-sm-8 col-lg-8">{{pageData["dao"].data_inserimento|datetimeformat}}</div>
    <div class="clearfix"></div>
{% for k in pageData["campi"] %}
   {% if pageData["campdict"][k.denominazione] == "img" or pageData["campdict"][k.denominazione]=="firm" %}
      <div class="ri rounded">
   <div class="col-sm-4 col-lg-4"><b>{{k.denominazione}}:</b></div>
   <div class=" col-sm-8 col-lg-8" > <a href="data:image/png;base64,{{pageData['djson'][0][k.denominazione]}}" rel="prettyPhoto" title="{{k.denominazione}}"><img style='max-height: 200px; max-width: 200px' src="data:image/png;base64,{{pageData['djson'][0][k.denominazione]}}" alt="{{k.denominazione}}" /></a></div>
   <div class="clearfix"></div>
   </div>
    {% elif pageData["campdict"][k.denominazione]=="geox" %}

    <div class="ri item rounded dark">
        <div id="map_canvas" class="map rounded"></div>
    </div>
    <div class="clearfix"></div>
   {% elif "id_" not in  k.denominazione[0:3] and "categoria" not in k.denominazione|lower and "ente" not in k.denominazione|lower and not pageData["campdict"][k.denominazione]=="geoy" %}
   <div class="ri rounded">
   <div class="col-sm-4 col-lg-4"><b>{{k.denominazione}} :</b></div>
    <div class="col-sm-8 col-lg-8"> {{pageData['djson'][0][k.denominazione]}}</div>
    <div class="clearfix"></div>
    </div>
   {% endif %}

{% endfor %}

<div class="col-sm-4 col-lg-4 "><b>Identificativo univoco rilevazione:</b></div>
<div class="col-sm-8 col-lg-8">{{pageData["dao"].hash_record}}</div>
    <div class="clearfix"></div>
<div class="col-sm-4 col-lg-4"><b>Identificativo univoco inserimento csv:</b></div>
<div class="col-sm-8 col-lg-8">{{pageData["dao"].hash_importazione|nonone}}</div>
</div>

{% if pageData["pp"] == "1" %}
<hr/>
    <div style="padding:10px;">
<button  type="button" class="btn btn-success col-xs-12 col-sm-12 col-lg-12 centered" data-dismiss="modal">Close</button>
</div>
<br/> <br/>
                              {% endif %}
{% endblock %}
{% block custom_js %}

     <script type="text/javascript">
         $(document).ready(function () {

    $("a[rel^='prettyPhoto']").prettyPhoto();

$("#map_canvas").gmap3({
  map:{
    options:{
      //center:{{pageData["center"]}},
      zoom: 18
    }
  },
  {% if pageData["tippo"] and pageData["tippo"] == "polygon" %}
  polygon:{
    options:{
      strokeColor: "#52B552",
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: "#52B552",
      fillOpacity: 0.35,
      paths:{{pageData["paths"]}},
    }
  } ,
  {% elif pageData["tippo"] and pageData["tippo"] =="polyline" %}
    polyline:{
    options:{
      strokeColor: "#52B552",
      strokeOpacity: 1.0,
      strokeWeight: 2,
      path:{{pageData["paths"]}},
    }
  } ,
  {% endif %}
  marker:{
    values:{{pageData["marker"]}},
    {% if pageData["icona_categoria"] %}
    options:{
      icon: "data:image/png;base64,{{pageData['icona_categoria']}}"
      },
    {% endif %}



    events:{
      mouseover: function(marker, event, context){
        var map = $(this).gmap3("get"),
          infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow:{
              anchor:marker,
              options:{content: context.data}
            }
          });
        }
      },
      mouseout: function(){
        var infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.close();
        }
      }
    }
  }
},"autofit");


    });
    </script>




{% endblock %}
